<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"  %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<form role="form" data-toggle="validator" id="form" name="form" >

<c:set var="docu_type" value="W" />
<c:if test="${not empty memberMap}">
	<c:set var="docu_type" value="M" />
	<div id="modal-title" style="display:none;">${memberMap.USER_NAME} (${memberMap.USER_ID})</div>
</c:if>
<input type="hidden" id="docu_type" name="docu_type" value="${docu_type}" />

<div class="row">
	<div class="col-lg-12">
		
		<div class="panel panel-default">
			<div class="panel-heading">
            	직원 정보
			</div>
			<div class="panel-body">
				<div class="row">
					<div class="col-lg-4">
						<div class="form-group">
						    <label class="control-label">* 직원 ID</label>
						    <input type="text" class="form-control" id="user_id" name="user_id" value="${memberMap.USER_ID}"
						    										<c:if test="${not empty memberMap}">
						    										readonly="readonly"
						    										</c:if>
						    										data-minlength="4" maxlength="16"
						    										<c:if test="${empty memberMap}">
						    										data-remote="/member/memberDuplicateCheck.json"
						    										</c:if> 
						    										data-error="아이디를 입력해주세요."
						    										data-minlength-error="4 ~ 16자만 가능합니다."  
						    										data-remote-error="사용중인 아이디입니다."
						    										required="required">
						    <div class="help-block with-errors">4 ~ 16자 (대/소문자, 숫자, 특수문자)</div>
						</div>
						<div class="form-group">
						    <label class="control-label">* 비밀번호</label>
						    <input type="password" class="form-control" id="password" name="password"
						    											data-minlength="6" maxlength="32"
						    											data-error="비밀번호를 입력해주세요."
						    											data-minlength-error="6 ~ 32자만 가능합니다."
						    											<c:if test="${empty memberMap}">
						    											required="required"
						    											</c:if>
						    											>
						    <div class="help-block with-errors">6 ~ 32자 (대/소문자, 숫자, 특수문자)</div>
						</div>
						<c:if test="${empty memberMap}">
						<div class="form-group">
						    <label class="control-label">* 비밀번호 확인</label>
						    <input type="password" class="form-control" id="re_password" name="re_password"
						    											data-match="#password" 
						    											data-error="비밀번호를 입력해주세요."
						    											data-match-error="비밀번호를 확인하세요."
						    											required="required">
						    <div class="help-block with-errors">&nbsp;</div>
						</div>
						</c:if>
						<div class="form-group">
						    <label class="control-label">* 직원 이름</label>
						    <input type="text" class="form-control" id="user_name" name="user_name" value="${memberMap.USER_NAME}"
						    										maxlength=8
						    										data-error="이름을 입력해주세요."
						    										required="required">
						    <div class="help-block with-errors">8자 이내로 작성</div>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="form-group">
							<label class="control-label">* 이메일</label>
							<div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
		                        <input type="email" class="form-control" id="email" name="email" value="${memberMap.EMAIL}"
		                        										 required="required">
                            </div>
		                    <span class="help-block with-errors">ex) abc@gmail.com</span>
                        </div>
                        <div class="form-group">
							<label class="control-label">* 휴대 전화</label>
	                        <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
                                <input type="tel" class="form-control"  id="phone_1" name="phone_1" value="${memberMap.PHONE_1}"
                                										pattern="^\d{3}-\d{3,4}-\d{4}$"
                                										required="required">
                            </div>
                            <span class="help-block with-errors">ex) 010-1234-5678</span>
                        </div>
                        <div class="form-group">
							<label class="control-label">일반 전화</label>
	                        <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                                <input type="tel" class="form-control"  id="phone_2" name="phone_2" value="${memberMap.PHONE_2}"
                                										pattern="^\d{2,3}-\d{3,4}-\d{4}$">
                            </div>
                            <span class="help-block with-errors">ex) 02-123-4567</span>
                        </div>
					</div>
					<div class="col-lg-4">
						<div class="form-group">
						   <label class="control-label">* 직급</label>
						   <select class="form-control" id="position" name="position"
						   								data-error="직급을 선택해주세요." 
						   								required="required">
						   		<option value="" disabled selected>선택</option>
                               <c:forEach items="${posList}" var="list">
                               	<option <c:if test="${memberMap.POSITION eq list.CODE}">selected="selected"</c:if> value="${list.CODE}">${list.NAME}</option>
                               </c:forEach>
                           </select>
                           <div class="help-block with-errors">&nbsp;</div>
						</div>
						<div class="form-group">
						   <label class="control-label">* 권한 (레벨)</label>
						   <select class="form-control" id="auth_level" name="auth_level"
						   								data-error="권한을 선택해주세요."  
						   								required="required">
						   		<option value="" disabled selected>선택</option>
                               <c:forEach items="${levelList}" var="list">
                               	<option <c:if test="${memberMap.AUTH_LEVEL eq list.CODE}">selected="selected"</c:if> value="${list.CODE}">${list.NAME}</option>
                               </c:forEach>
                           </select>
                           <div class="help-block with-errors">&nbsp;</div>
						</div>
						<div class="form-group">
						   <label class="control-label">* 상태</label>
						   <select class="form-control" id="status" name="status"
						   								data-error="상태를 선택해주세요." 
						   								required="required">
						   		<option value="" disabled selected>선택</option>
                               <c:forEach items="${statusList}" var="list">
                               	<option <c:if test="${memberMap.STATUS eq list.CODE}">selected="selected"</c:if> value="${list.CODE}">${list.NAME}</option>
                               </c:forEach>
                           </select>
                           <div class="help-block with-errors">
                          		<c:if test="${not empty memberMap}">
                          			정상 상태로 변경시 퇴사 정보 삭제
                          		</c:if>
                           </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="panel panel-default">
	<div class="panel-heading">
          	입사/퇴사일 정보
	</div>
	<div class="panel-body">
		<div class="row">
			<div class="col-lg-6">
				<div class="form-group">
				    <label class="control-label">입사일</label>
				   	<div class='input-group date' id='div_join_date'>
				   		<input type='text' class="form-control readonly" id="join_date" name="join_date" value="${memberMap.JOIN_DATE}"
				   												maxlength=10
				   												data-error="입사일을 선택 해주세요."  
				   												required="required">
				   		<span class="input-group-addon">
				   			<i class="glyphicon glyphicon-calendar"></i>
						</span>
				   	</div>
				   	<div class="help-block with-errors"></div>
				</div>
			</div>
			<div class="col-lg-6">
				<div class="form-group">
				    <label class="control-label">퇴사일</label>
				   	<div class='input-group date' id='div_out_date'>
				   		<input type='text' class="form-control" id="out_date" name="out_date" value="${memberMap.OUT_DATE}"	
				   												maxlength=10
				   												data-error="퇴사일을 선택 해주세요.">
				   		<span class="input-group-addon">
				   			<i class="glyphicon glyphicon-calendar"></i>
						</span>
				   	</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-lg-12" style="text-align:center;">
		<c:choose>
			<c:when test="${empty memberMap}">
				<button type="submit" class="btn btn-success" 
									  data-toggle="confirmation" 
									  title="<spring:message code='comm.write.confirm' />" 
									  data-btn-ok-label="<spring:message code='comm.btn.continue' />"
									  data-btn-cancel-label="<spring:message code='comm.btn.cancle' />">등록</button>
			</c:when>
			<c:otherwise>
				<button type="submit" class="btn btn-primary"
									  data-toggle="confirmation" 
									  title="<spring:message code='comm.modify.confirm' />" 
									  data-btn-ok-label="<spring:message code='comm.btn.continue' />"
									  data-btn-cancel-label="<spring:message code='comm.btn.cancle' />">수정</button>
				<button type="button" class="btn btn-warning" id="delete"
									  data-toggle="confirmation" 
									  title="<spring:message code='comm.delete.confirm' />" 
									  data-btn-ok-label="<spring:message code='comm.btn.continue' />"
									  data-btn-cancel-label="<spring:message code='comm.btn.cancle' />">삭제</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
			</c:otherwise>
		</c:choose>
	</div>
</div>
		
	<script type="text/javascript">
		$('#div_join_date').datepicker({
			autoclose: true,
		    format: "yyyy-mm-dd",
		    language: "kr",
		    todayHighlight: true,
		    toggleActive: true
		});
		
		$('#div_out_date').datepicker({
			autoclose: true,
		    format: "yyyy-mm-dd",
		    language: "kr",
		    todayHighlight: true,
		    toggleActive: true
		});
		
		
	</script>
	
	
</form>
				


<script type="text/javascript">

	$(document).ready(function() {
		$('[data-toggle=confirmation]').confirmation();
		
		$('#delete').on('click', function () {
			
			$.ajax({
		        url: "/member/submitDelete.ur",
		        type: "POST",
		        data: $('#form').serializeArray(),
		        success: function(data, status, xhr) {
					switch(data) {
						case 0 : 
							bs_alert.modal("<spring:message code='comm.delete.success' />", "success");
							setTimeout(function(){
								location.reload();
							}, 1500);
							break;
						case 9 : 
							bs_alert.modal("<spring:message code='comm.request.data.error' />", "warning");
							break;
						case 1 :
							bs_alert.modal("<spring:message code='comm.db.delete.error' />", 'warning');
							break;
						case 8 :
							bs_alert.modal("<spring:message code='comm.unknown.error' />", 'warning');
							break;
					}
		        },
		        error: function(xhr, status, err) {
		            // do the error stuff
		        }
		    });
		});
		
		
		$('#form').validator().on('submit', function(e) {
		
			if (e.isDefaultPrevented()) {
				bs_alert.modal("<spring:message code='comm.field.empty.error' />", "info");
			} else {
				
				e.preventDefault();
				
				var url = "/member/submitRegister.ur";
				var action_flag = "RELOAD";
				<c:if test="${not empty memberMap}">
					url = "/member/submitModify.ur";
					action_flag = "LIST";
				</c:if>
					
				$.ajax({
			        url: url,
			        type: "POST",
			        data: $(this).serializeArray(),
			        success: function(data, status, xhr) {
						switch(data) {
							case 0 : 
								bs_alert.modal("<spring:message code='comm.modify.success' />", "success", action_flag);
								break;
							case 9 : 
								bs_alert.modal("<spring:message code='comm.request.data.error' />", "warning", action_flag);
								break;
							case 1 :
								bs_alert.modal("<spring:message code='comm.db.modify.error' />", 'warning', action_flag);
								break;
							case 8 :
								bs_alert.modal("<spring:message code='comm.unknown.error' />", 'warning', action_flag);
								break;
						}
			        },
			        error: function(xhr, status, err) {
			            // do the error stuff
			        }
			    });
			}
		});
	});
	
	
</script>



